<template>
    <el-card class="box-card" shadow="never">
        <template #header>
            <div class="card-header">
                <span class="tip">只能上传图片格式，大小不超过1M<br>点击编辑可将图片排序或删除，再次点击可取消编辑</span>
                <div class="card-header-right-btn">
                <el-upload
                    class="upload-demo"
                    multiple
                    :show-file-list="false"
                    :http-request="httpRequest"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
                <el-button type="primary" @click="handleImageEdit">{{
                    editText
                }}</el-button>
                </div>
            </div>
        </template>
        <div class="upload-img">
            <div
                v-loading="file.uploading"
                element-loading-text="上传中"
                class="upload-img-item"
                v-for="(file, index) in fileList"
                :data-index="index"
                @mouseenter="handleEnter(file)"
                @mouseleave="handleLeave(file)"
                @dragenter="handleDragEnter(file)"
                @dragstart="handleDragStart(file)"
            >
                <img :src="prefixUrl + file.url" alt="" />
                <div
                    class="upload-img-item-matte"
                    v-if="file.showMatte && !isEdit && !file.uploading"
                >
                    <el-icon
                        class="zoom"
                        @click="handlePictureCardPreview(file)"
                        ><ZoomIn
                    /></el-icon>
                </div>
                <div
                    class="upload-img-item-remove"
                    v-if="isEdit && !file.uploading"
                    @click="handleImageRemove(file)"
                >
                    <el-icon :size="20" color="#ff0000"><Remove /></el-icon>
                </div>
            </div>
        </div>
    </el-card>
    <el-dialog class="zoom-dialog" center title="预览图片" v-model="zoomVisible">
        <img  :src="prefixUrl + zoomFile" alt="预览图片" />
    </el-dialog>
</template>
<script setup>
import { generatePath, getBase64 } from "@/utils/file";
import { UploadFilled } from "@element-plus/icons-vue";
import { upload } from "@/services";
import { ref } from "vue";
import {
    Delete,
    Download,
    Plus,
    ZoomIn,
    Remove,
} from "@element-plus/icons-vue";

import {ElMessage} from "element-plus";
import { url,staticUrl,deleteFile } from "@/services";
import { useContentStore } from "@/stores/content";
import { storeToRefs } from "pinia";
const {fileList,removeFileList} = storeToRefs(useContentStore());
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
// const fileList = ref<UploadFile[]>([]);
const fileData = ref();
const showMatte = ref(false);
const isEdit = ref(false);
const currentDragFile = ref({});
const editText = ref("编辑");
const zoomVisible = ref(false);
const zoomFile = ref("");
const prefixUrl = ref(staticUrl);
const handleEnter = (file) => {
    file.showMatte = true;
};
const handleLeave = (file) => {
    file.showMatte = false;
};
const handleImageRemove = (file) => {
    fileList.value = fileList.value.filter((item) => item != file);
    removeFileList.value.push(file.url);
    // deleteFile(file.url);
    
};

const handlePictureCardPreview = (file) => {
    zoomFile.value = file.url;
    zoomVisible.value = true;
};

const handleDragStart = (file) => {
    currentDragFile.value = file;
};
const handleDragEnter = (file) => {
    if (currentDragFile.value) {
        let index = fileList.value.findIndex((item) => item == file);
        let currentIndex = fileList.value.findIndex(
            (item) => item == currentDragFile.value
        );
        if (index != currentIndex) {
            fileList.value.splice(currentIndex, 1);
            fileList.value.splice(index, 0, currentDragFile.value);
        }
    }
};

const handleImageEdit = () => {
    // fileList.value.forEach(item => item.showMatte = false);
    isEdit.value = !isEdit.value;
    editText.value = isEdit.value ? "取消编辑" : "编辑";
};
const httpRequest = async (request) => {
    // console.log("request",request);
    if(!request.file.type.startsWith('image')){
        ElMessage.error('只能上传图片格式');
        return;
    }
    if(request.file.size > 1024 * 1024 * 1){
        ElMessage.error('图片大小不能超过1M');
        return;
    }
    let formData = new FormData();
    formData.append("file", request.file);
    let object = request.data;
    for (const key in object) {
        formData.append(key, object[key]);
    }
    let file = {
        name: generatePath(request.file),
        status: "success",
        showMatte: false,
        uploading:true
    }
    fileList.value.push(file);
    try{
        const data = await upload(formData);
        
        if(data.status == 0){
            fileList.value.pop();
            ElMessage.error('上传失败');
            return;
        }
        file.url = data;
        file.uploading = false;
        fileList.value = [...fileList.value];
    }catch(e){
        console.log("error:",e);
        fileList.value.pop();
        ElMessage.error('上传失败');
    }
    

    
};

</script>
<style scoped>
.box-card{
    width: 100%;
}
.tip{
    font-size:12px;
    color:#ccc;
}
.card-header{
    display: flex;
}
.card-header-right-btn{
    width: 150px;;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.upload-img {
    display: flex;
    flex-wrap: wrap;
}
.upload-img-item {
    width: 50px;
    height: 50px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}
.upload-img-item:hover {
    cursor: pointer;
}
.upload-img-item-matte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}
.upload-img-item-matte .zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
}
.upload-img-item-remove {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: white;
    height: 20px;
}
.upload-img-item img {
    width: 100%;
    height: 100%;
}
/* .zoom-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
} */
.zoom-dialog img{
    width:100%;
}
</style>
